<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000px">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入姓名" :clearable="true" />
        </el-form-item>
        <el-form-item label="单位" prop="unitId">
          <el-select v-model="queryParams.unitId" placeholder="请输入单位" :clearable="true">
            <el-option
              v-for="dict in unitList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
          <el-button @click="saveValues"> 保存 </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :adaptive="true"
        :page-data="queryData"
        save-key="UnitWorkerSelect"
        @page-change="getPage"
        @row-dblclick="handleTableDblclick"
      />
    </ContentWrap>
    <ContentWrap class="h-[230px]">
      <Table :columns="columns" :data="selectInfoList" @row-dblclick="handleSelectTableDblclick" />
    </ContentWrap>
  </Dialog>
</template>
<script setup name="UnitWorkerSelect" lang="ts">
import * as UnitWorkerApi from '@/api/unit/worker'
import * as UnitApi from '@/api/unit/unit'
import * as UnitRankApi from '@/api/unit/rank'
import { DICT_TYPE, getDictObj } from '@/utils/dict'
import * as UnitWorkerModel from '@/model/unit/worker/UnitWorker'
const emit = defineEmits(['selectValue'])
const selectInfoList = ref<UnitWorkerModel.UnitWorker[]>([]) // 选中的字段列表
const unitList = ref()
const rankList = ref()
const dialogTitle = ref('')
const dialogVisible = ref(false)
const queryFormRef = ref()
const queryParams = ref({
  name: undefined,
  unitId: undefined
})
const queryData = ref()
const columns = [
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '单位',
    prop: 'unitId',
    formatter: ({ unitId }) => unitList.value.find((obj) => obj.id === unitId).name
  },
  {
    label: '职级',
    prop: 'rankId',
    formatter: ({ rankId }) => rankList.value.find((obj) => obj.id === rankId).name
  },
  {
    label: '职务',
    prop: 'duties'
  },
  {
    label: '身份证号',
    prop: 'identityCard'
  },
  {
    label: '性别',
    prop: 'sex',
    formatter: ({ sex }) => getDictObj(DICT_TYPE.COMMON_SEX, sex).label
  },
  {
    label: '办公电话',
    prop: 'officeTelephone'
  },
  {
    label: '手机号',
    prop: 'mobile'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '更新时间',
    prop: 'updateTime'
  }
]
/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  unitList.value = await UnitApi.simpleList()
  rankList.value = await UnitRankApi.simpleList()
  selectInfoList.value = []
  getPage()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await UnitWorkerApi.pageQuery(queryParams.value)
}

/** 处理table行双击事件 */
const handleTableDblclick = (row) => {
  selectInfoList.value.push(row)
}

const saveValues = () => {
  emit('selectValue', selectInfoList.value)
  close()
}

const handleSelectTableDblclick = (row) => {
  const index = selectInfoList.value.indexOf(row)
  selectInfoList.value.splice(index, 1)
}

/** 关闭弹窗 */
const close = async () => {
  dialogVisible.value = false
}
</script>
